<template>
  <div class="banli-table-wrapper">
    <el-table
      :data="tableList"
      :default-sort="{ prop: 'data', order: 'descending' }"
      border
      stripe
    >
      <el-table-column
        prop="bumen"
        label="部门"
        sortable
      > </el-table-column>
      <el-table-column
        prop="gangwei"
        label="岗位"
        sortable
      > </el-table-column>
      <el-table-column
        prop="data"
        label="发布日期"
        sortable
      > </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="showDetail(scope.$index, scope.row)"
          >查看详情</el-button>
          <el-button
            size="mini"
            type="success"
            @click="showDialog(scope.$index, scope.row)"
          >状态修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="修改招聘状态"
      :visible.sync="popoverVisible"
      width="30%"
    >
      <div class="popover-content-wrapper">
        <span>将招聘状态修改为: </span>
        <el-button
          type="primary"
          size="mini"
          v-show="state===1||state===2"
          @click="editState(0)"
        >重新启动</el-button>
        <el-button
          type="success"
          size="mini"
          v-show="state===0"
          @click="editState(1)"
        >完成招聘</el-button>
        <el-button
          type="danger"
          size="mini"
          v-show="state===0"
          @click="editState(2)"
        >撤销招聘</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { homeMixin } from '../../utils/mixin'
export default {
  mixins: [homeMixin],
  props: {
    tableList: Array
  },
  data () {
    return {
      popoverVisible: false,
      zpid: -1,
      // 0已启动，1已完成，2已撤销
      state: -1
    }
  },
  methods: {
    // 查看招聘详情
    showDetail (index, row) {
      console.log(row)
      this.setIsAdd(false)
      this.getZhaopinData(row.zpid)
    },
    async getZhaopinData (zpid) {
      const { data } = await this.$http.get('/zp/queryone', {
        params: {
          zpid: zpid
        }
      })
      console.log(data)
      if (data.error_code === 0) {
        this.setZhaopinForm(data.data)
        this.setAddZpDialogVisible(true)
      }
    },
    // 显示修改招聘状态的对话框
    showDialog (index, row) {
      console.log(row)
      this.zpid = row.zpid
      this.state = row.state
      this.popoverVisible = true
    },
    // 修改招聘信息的状态值，传入招聘id，和修改后的招聘状态
    async editState (state) {
      console.log(this.zpid, state)
      // 发送请求，修改状态值
      const { data } = await this.$http.post('/zpstate/update', {
        zpid: this.zpid,
        state
      })
      if (data.error_code === 0) {
        this.$message.success('状态修改成功！')
      }
      // TODO 重新获取数据，刷新表格
      this.$router.go(0)
      this.popoverVisible = false
    }
  }
}
</script>

<style lang="scss" scoped></style>
